<template>
	<view class="page">
		<cu-custom :isBack="true" class="bg-blue">
			<block slot="backText">返回</block>
			<block slot="content">巡检轨迹</block>
		</cu-custom>
		<view style="width: 100%;" :style="{'height':'calc(100vh - '+headerHeigth+'px)'}">
			<map :latitude="map.center.latitude" :longitude="map.center.longitude" :markers="map.markers" :polyline="map.lines"
			 style="width: 100%;height: 100%;"></map>
		</view>
	</view>
</template>

<script>
	let that = null;
	export default {
		data() {
			return {
				headerHeigth: this.CustomBar,
				points: [],
				map: {
					center: {
						latitude: 0.0,
						longitude: 0.0
					},
					lines: [],
					markers: []
				}
			}
		},
		onLoad(options) {
			that = this;

			let path = JSON.parse(decodeURIComponent(options.path));
			let list = path.split(',')
			let points = [];
			for (let i = 0; i < list.length; i++) {
				let p = list[i];
				let ps = p.split(' ');
				let point = {
					latitude: ps[0],
					longitude: ps[1]
				};
				points.push(point)
			}
			that.points = points;
			if (that.points.length == 0) {
				return
			}
			if (that.points.length == 1) {
				// 只添加定位点marker
				that.map.markers = [that.createStartMarker(points[0])];
			} else {
				let startMarker = that.createStartMarker(points[0]);
				let endMarker = that.createEndMarker(points[points.length - 1]);
				that.map.markers = [startMarker, endMarker];
			}
			that.map.center = points[0];
			that.map.lines = [{
				points: points,
				color: '#e64340',
				width: 8
			}];


		},
		methods: {
			// 创建起点marker
			createStartMarker: function(p) {
				return {
					id: 0,
					latitude: p.latitude,
					longitude: p.longitude,
					iconPath: '/static/patrol/patrol_map_marker_start.png'
				}
			},
			// 创建终点marker
			createEndMarker: function(p) {
				return {
					id: 1,
					latitude: p.latitude,
					longitude: p.longitude,
					iconPath: '/static/patrol/patrol_map_marker_end.png'
				}
			}
		}
	}
</script>

<style>
</style>
